<template>
  <div class="discount-points">
    <h1>折扣与积分</h1>

    <!-- 折扣信息部分 -->
    <section class="discount-info">
      <h2>我的折扣信息</h2>
      <p>
        <strong>当前折扣等级：</strong> 
        <n-tag type="success">
          {{ discountLevel }}
        </n-tag>
      </p>
      <p>
        <strong>当前折扣率：</strong> 
        <n-progress
        type="line"
        :percentage="60"
        indicator-placement="inside"
        processing
      />
      </p>
    </section>

    <!-- 积分信息部分 -->
    <section class="points-info">
      <h2>我的积分</h2>
      <p>
        <strong>当前积分：</strong> 
        <n-number-animation ref="numberAnimationInstRef" :from="0" :to="333" />
      </p>
      <p><strong>可用积分折扣：</strong> 每100积分折扣5元</p>
    </section>
  </div>
</template>

<script setup>
import {NNumberAnimation,NProgress,NTag} from 'naive-ui'
const discountLevel = 'Gold';  // 用户折扣等级
const discountRate = 10;       // 用户当前折扣率（假设为10%）
const currentPoints = 750;     // 用户当前积分数量
</script>

<style scoped>
.discount-points {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1,
h2 {
  color: #333;
}

p {
  margin-bottom: 10px;
}
</style>